Google Charts ব্যবহার করে আপনি ডেটার জন্য কাস্টম থিম এবং টেমপ্লেট তৈরি করতে পারেন, যা গ্রাফের ডিজাইন এবং উপস্থাপনা আরও আকর্ষণীয় এবং প্রাসঙ্গিক করতে সাহায্য করে। কাস্টম থিম তৈরি করার মাধ্যমে আপনি আপনার চার্টের রঙ, ফন্ট, শিরোনাম, অক্ষের স্টাইল, ব্যাকগ্রাউন্ড ইত্যাদি কাস্টমাইজ করতে পারবেন। এছাড়া, আপনি Templates ব্যবহার করে একাধিক চার্টের জন্য স্টাইল এবং ডিজাইন নির্ধারণ করতে পারেন।
এখানে আমরা Google Charts-এ Custom Themes এবং Templates তৈরি করার জন্য কিছু সাধারণ পদ্ধতি এবং কৌশল আলোচনা করব।
১. Custom Themes তৈরি করা
গুগল চার্টে কাস্টম থিম তৈরি করার জন্য আপনি options অবজেক্ট ব্যবহার করতে পারেন, যেখানে আপনি চার্টের বিভিন্ন উপাদান যেমন রঙ, ফন্ট, ব্যাকগ্রাউন্ড, অক্ষের স্টাইল ইত্যাদি কাস্টমাইজ করতে পারেন। গুগল চার্টের themes আপনাকে দ্রুত একটি গ্রাফের চেহারা পরিবর্তন করতে সহায়ক হয়।
উদাহরণ: Google Chart এর জন্য Custom Theme
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2015', 1000],
['2016', 1200],
['2017', 1500],
['2018', 1800]
]);
var options = {
title: 'Custom Theme Example',
titleTextStyle: {fontSize: 24, color: '#333333', bold: true}, // Custom Title Style
backgroundColor: '#f4f4f4', // Custom Background Color
hAxis: {
title: 'Year',
titleTextStyle: {fontSize: 18, color: '#555555'}, // Custom x-axis title style
textStyle: {color: '#444444'}, // Custom x-axis text style
gridlines: {color: 'transparent'} // Disable gridlines for x-axis
},
vAxis: {
title: 'Sales',
titleTextStyle: {fontSize: 18, color: '#555555'}, // Custom y-axis title style
textStyle: {color: '#444444'}, // Custom y-axis text style
gridlines: {color: '#e0e0e0'} // Custom gridline color
},
legend: {
position: 'top',
textStyle: {fontSize: 16, color: '#0000ff'} // Custom legend style
},
colors: ['#1b9e77'], // Custom color for the line
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- titleTextStyle: শিরোনামের জন্য কাস্টম ফন্ট সাইজ, রঙ এবং বোল্ড স্টাইল সেট করা হয়েছে।
- backgroundColor: চার্টের পটভূমির রঙ পরিবর্তন করা হয়েছে।
- hAxis এবং vAxis: অক্ষের শিরোনাম এবং টেক্সট স্টাইল কাস্টমাইজ করা হয়েছে।
- colors: চার্টের রঙ কাস্টমাইজ করা হয়েছে (লাল রঙ ব্যবহার করা হয়েছে লাইন চার্টে)।
২. Templates তৈরি করা
Templates সাধারণত একাধিক গ্রাফের জন্য একই রকম ডিজাইন বা স্টাইল প্রয়োগ করতে ব্যবহৃত হয়। আপনি একটি কাস্টম template তৈরি করে সেই template অনুযায়ী একাধিক চার্টের ডিজাইন কাস্টমাইজ করতে পারেন। এর মাধ্যমে আপনি একাধিক চার্টের জন্য একই ধরনের রঙ, ফন্ট এবং অন্যান্য বৈশিষ্ট্য সরাসরি প্রয়োগ করতে পারবেন।
উদাহরণ: Google Charts Template
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
var data1 = google.visualization.arrayToDataTable([
['Year', 'Product A'],
['2015', 1000],
['2016', 1170],
['2017', 660],
['2018', 1030]
]);
var data2 = google.visualization.arrayToDataTable([
['Year', 'Product B'],
['2015', 400],
['2016', 460],
['2017', 1120],
['2018', 540]
]);
var options = {
title: 'Product Sales',
titleTextStyle: {fontSize: 24, color: '#333333', bold: true},
backgroundColor: '#f4f4f4',
hAxis: {title: 'Year', titleTextStyle: {fontSize: 18, color: '#555555'}},
vAxis: {title: 'Sales', titleTextStyle: {fontSize: 18, color: '#555555'}},
legend: {position: 'top', textStyle: {fontSize: 16, color: '#0000ff'}},
colors: ['#1b9e77']
};
var chart1 = new google.visualization.BarChart(document.getElementById('chart_div1'));
var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));
chart1.draw(data1, options);
chart2.draw(data2, options);
}
</script>
</head>
<body>
<div id="chart_div1" style="width: 900px; height: 500px;"></div>
<div id="chart_div2" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- Template হিসাবে একটি সাধারণ কাস্টম থিম তৈরি করা হয়েছে যা দুটি চার্টে প্রয়োগ করা হয়েছে।
- একই ধরনের title, axis, legend এবং color স্কিম দুটি গ্রাফে প্রয়োগ করা হয়েছে।
৩. Theme Switching (থিম পরিবর্তন)
গুগল চার্টে আপনি ব্যবহারকারীর জন্য বিভিন্ন থিম তৈরি করতে পারেন এবং theme switching অপশন দিয়ে সেই থিম পরিবর্তন করতে পারেন। এটি ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও ইন্টারেক্টিভ এবং আকর্ষণীয় করে তোলে।
উদাহরণ: Theme Switching
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
var chartOptions = {
title: 'Product Sales',
titleTextStyle: {fontSize: 24, color: '#333333', bold: true},
backgroundColor: '#f4f4f4',
hAxis: {title: 'Year', titleTextStyle: {fontSize: 18, color: '#555555'}},
vAxis: {title: 'Sales', titleTextStyle: {fontSize: 18, color: '#555555'}},
legend: {position: 'top', textStyle: {fontSize: 16, color: '#0000ff'}},
colors: ['#1b9e77']
};
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Product A', 'Product B'],
['2015', 1000, 400],
['2016', 1170, 460],
['2017', 660, 1120],
['2018', 1030, 540]
]);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, chartOptions);
}
function switchTheme() {
chartOptions.backgroundColor = chartOptions.backgroundColor === '#f4f4f4' ? '#ffffff' : '#f4f4f4';
chartOptions.colors = chartOptions.colors[0] === '#1b9e77' ? ['#ff0000'] : ['#1b9e77'];
drawChart();
}
</script>
</head>
<body>
<button onclick="switchTheme()">Switch Theme</button>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- Theme switching ফাংশন ব্যবহার করা হয়েছে, যা ব্যবহারকারীকে থিম পরিবর্তন করার সুযোগ দেয় (ব্যাকগ্রাউন্ড রঙ এবং রঙ স্কিম পরিবর্তন করার মাধ্যমে)।
সারমর্ম
Google Charts-এ Custom Themes এবং Templates তৈরি করার মাধ্যমে আপনি ডেটার উপস্থাপনা এবং ডিজাইন কাস্টমাইজ করতে পারেন। আপনি options অবজেক্ট ব্যবহার করে চার্টের বিভিন্ন উপাদান কাস্টমাইজ করতে পারেন, যেমন শিরোনাম, অক্ষের স্টাইল, রঙ ইত্যাদি। এছাড়া, Template ব্যবহার করে একাধিক গ্রাফের জন্য একই স্টাইল প্রয়োগ করতে পারেন। Theme switching অপশন দিয়ে আপনি ব্যবহারকারীদের জন্য ডাইনামিক থিম পরিবর্তন করতে পারেন, যা আপনার চার্টগুলিকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।
Read more
